
import type { InjectionKey } from 'vue'
import { reactive, ref, readonly, watch } from 'vue'

import {
  defineStore,
  useStoreLocal,
  BaseArray,
  List,
  Model
} from '../../../lib/main'
 


// 引入接口
import type { IListWebInfo, IQuery, IPagerInfo, ICompany } from '../../types/type'

 
// 区分局部状态的标记
const flag = Symbol('pager') // as InjectionKey<string>

// 泛型约束，回调函数返回的类型
type Res = {
  allCount: number, 
  list: Array<ICompany>
}

/**
 * 注册局部状态，数据列表用
 * @param service 获取数据的回调函数
 * @returns 
 */
export function regListState<T extends Res>(
    service: (query: IQuery, pagerInfo: IPagerInfo) => Promise<T>
  ) {
   
  // 定义列表用 的状态
  const state = defineStore<IListWebInfo<ICompany>>(flag,
    () => {
      // 页面信息
      const meta = reactive({
        title: '列表测试', // 模块标题
        deep: 0, // 递归层数
        moduleId: 100 // 模块ID
      })
      // 记录集合，reactive
      const dataList = List<ICompany>([])
      // 查询条件
      const query = reactive({
        findValue: {}, // 查询条件的精简形式
        findArray: [], // 查询条件的对象形式
      })
      // 分页相关的信息
      const pagerInfo = reactive({
        pagerSize: 5,
        count: 20, // 总数
        pagerIndex: 1 // 当前页号
      })
      const selection = reactive({
        dataId: '',
        row: Model<ICompany>(() => {
          return {
            id: '',
            name: '',
            address: '',
            telephone: ''
          }
        }),
        dataIds: List([]),
        rows: List([])
      })
      /**
       * 加载数据的函数，
       * @param isReset true：设置总数，页号设置为1；false：仅翻页
      */
      async function loadData (isReset = false) {
        // 获取数据
        const { allCount, list } = await service(query, pagerInfo)
        if (isReset) {
          pagerInfo.pagerIndex = 1
        }
        pagerInfo.count = allCount
        dataList.$state = list
      }

      // 监听页号，实现翻页功能
      watch(() => pagerInfo.pagerIndex, () => {
        loadData()
      })

      // 监听查询条件，实现查询功能。
      watch(query.findValue, () => {
        loadData(true)
      })
      // 返回一个状态，如果需要只读，可以使用 readonly 
      return {
        loadData, // 其实是内部使用的。
        meta,
        dataList,
        selection,
        pagerInfo, // 分页信息
        query // 查询条件
      }
    }
  )
  
  // 初始化
  state.loadData(true)
  // 返回 数据和状态
  return state
}

/**
 * 子组件用 inject 获取状态
 * @returns
 */
export const getListState = ()  => {
  const re = useStoreLocal<IListWebInfo<ICompany>>(flag)
  return re as IListWebInfo<ICompany>
}
 
